<template>
    <div>
        <slides :announcement="announcement" :slides="slides"></slides>
        <list :books="books" heading="最近更新" @onBookSelect="preview($event)"></list>
        <list :books="recommended" heading="编辑推荐" @onBookSelect="preview($event)"></list>

        <modal-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import list from './list.vue'
    import slides from './slides.vue'
    import ModalDialog from './dialog.vue'
    export default {
        components: {slides, list, ModalDialog},
        data() {
            return {
                announcement: '',
                slides: [],
                books: [],
                recommended: [],
                selected: undefined
            }
        },
        created(){
            this.$http.get('/data.json').then(res=> {
                this.announcement = res.body.announcement
                this.slides = res.body.slides
                this.books = res.body.books
                this.recommended = res.body.recommended
            })
        },
        methods: {
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        }
    }
</script>
